<% color_option = product.option_types.find { |option_type| option_type.color? } %>
<% variants_with_color = product.variants.find_all { |variant| variant.option_values.find { |ov| ov.option_type_id == color_option.id } } if color_option.present? %>

<% if color_option.present? && variants_with_color.length > 0 %>
  <% cache spree_storefront_base_cache_scope.call(variants_with_color) do %>
    <% color_values = product.option_values.find_all { |ov| ov.option_type_id == color_option.id }.uniq %>
    <%= raw(Spree::ColorsPreviewStylesPresenter.new(color_values.map { |o| { name: o.presentation, filter_name: o.name } }).to_s) %>

    <div class="product-card-color-swatches pt-2 flex flex-wrap gap-0.5" data-plp-variant-picker-target="colorsContainer">
      <% color_values.each do |color_value| %>
        <% selected_variant = variants_with_color.find { |variant| variant.option_values.include?(color_value) } %>
        <% next if selected_variant.blank? %>

        <% cache spree_storefront_base_cache_scope.call(selected_variant) do %>
          <div
            data-variant-id="<%= selected_variant.id %>"
            class="[&:nth-of-type(n+4)]:hidden [&:nth-of-type(n+4)]:md:block [&:nth-of-type(n+8)]:md:hidden cursor-pointer"
            data-action="mouseenter->plp-variant-picker#handlePreview click->plp-variant-picker#redirectToVariant touch->plp-variant-picker#redirectToVariant"
            data-color="<%= color_value.presentation %>">
            <% if selected_variant.available? %>
              <%= render 'spree/products/color_picker',
                with_name: false,
                color: color_value.presentation,
                color_preview_container_class: "lg:w-[28px] lg:h-[28px]",
                color_preview_class: "lg:top-[2px] lg:left-[2px]" %>
            <% else %>
              <%= render 'spree/products/color_picker',
                with_name: false,
                color: color_value.presentation,
                disabled: true,
                color_preview_container_class: "lg:w-[28px] lg:h-[28px]",
                color_preview_class: "lg:top-[2px] lg:left-[2px]" %>
            <% end %>
            <% if selected_variant.default_image %>
              <template data-featured-image-template>
                <%= render 'spree/products/featured_image',
                  object: selected_variant %>
              </template>
            <% end %>
            <template data-add-to-wishlist-template>
              <%= render 'spree/products/add_to_wishlist', selected_variant: selected_variant %>
            </template>
            <template data-price-template>
              <%= render 'spree/products/price',
                product: product,
                selected_variant: selected_variant,
                use_variant: true,
                price_class: "mt-2 font-light product-card-price" %>
            </template>
          <% end %>
        </div>
      <% end %>
      <% # Plus Button %>
      <% colors_count = color_values.length %>
      <%= button_tag class: "border border-default peer-checked:border-primary peer-checked:border-solid p-0.5 items-center justify-center hover:border-dashed hover:border-primary rounded-full h-[30px] w-[30px] md:h-[34px] md:w-[34px] #{colors_count < 4 ? 'hidden' : 'inline-flex'} #{colors_count < 8 ? 'md:hidden' : 'md:inline-flex'}",
                     data: { action: "click->plp-variant-picker#showMoreColors" } do %>
        <%= render 'spree/shared/icons/plus', class: "pointer-events-none" %>
      <% end %>
    </div>
  <% end %>
<% end %>
